<!doctype html>
<!--
This is a first hack, implemented by Oliver Labs in 2012
on the basis of several examples which can be found on the internet.

It shows a single graph of a function f(x,y).

Just to show that it is possible to implement with not too much effort.
This code is not well-structure, neither well-documented.
-->
<html>
<head>
<title>Oliver's First 3d-Test</title>

  <link href="jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="jquery-1.8.3.js"></script>
  <script src="jquery-ui.min.js"></script>

<style type="text/css">
#strF {
  position: absolute;
  top: 550px;
  left: 400px;
  width: 400px;
}
#strFInput {
  width:300px;
}
#strGInput {
  width:300px;
}
#strHInput {
  width:300px;
}
#slider_a {
  position: absolute;
  top: 550px;
  left: 100px;
  width: 200px;
}
#aval {
  position: absolute;
  top: 550px;
  left: 330px;
}
#slider_b {
  position: absolute;
  top: 600px;
  left: 100px;
  width: 200px;
}
#bval {
  position: absolute;
  top: 600px;
  left: 330px;
}
</style>

<script>
  function change_a(a) {
   if(a<=0) {
      $("#aval").html("a = "+(a));
   } else {
      $("#aval").html("a = "+(a));
  }
   var threeJSFrameDoc = document.getElementById("threeJSFrame");
   threeJSFrameDoc.contentWindow['a'] = a;
}

  function change_b(b) {
   if(b<=0) {
      $("#bval").html("b = "+(b));
   } else {
      $("#bval").html("b = "+(b));
  }
   var threeJSFrameDoc = document.getElementById("threeJSFrame");
   threeJSFrameDoc.contentWindow['b'] = b;
}


$(document).ready(function() {
   $("#slider_a").slider(
      {
        slide: function(event, ui) { change_a(ui.value / 100.0); }
      },
      {
        change: function(event, ui) { change_a(ui.value / 100.0); }
      },
      {
        stop: function(event, ui) {
//            alert("stopped");
     }
  });
    $("#slider_a").slider( "option", "min", -100 );
    $("#slider_a").slider( "option", "max", 100 );
    $("#slider_a").slider( "option", "value", 100 );
    $("#slider_a").slider({ step: 1 });

    change_a(1.0);

   $("#slider_b").slider(
      {
        slide: function(event, ui) { change_b(ui.value / 100.0); }
      },
      {
        change: function(event, ui) { change_b(ui.value / 100.0); }
      },
      {
        stop: function(event, ui) {
    }
  });
    $("#slider_b").slider( "option", "min", -100 );
    $("#slider_b").slider( "option", "max", 100 );
    $("#slider_b").slider( "option", "value", 100 );
    $("#slider_b").slider({ step: 1 });

    change_b(1.0);

});


function strFChanged() {
   var threeJSFrameDoc = document.getElementById("threeJSFrame");
   var tmpH = document.getElementById("strFInput").value;
   threeJSFrameDoc.contentWindow['strF'] = tmpH;
}

function strGChanged() {
   var threeJSFrameDoc = document.getElementById("threeJSFrame");
   var tmpH = document.getElementById("strGInput").value;
   threeJSFrameDoc.contentWindow['strG'] = tmpH;
}

function strHChanged() {
   var threeJSFrameDoc = document.getElementById("threeJSFrame");
   var tmpH = document.getElementById("strHInput").value;
   threeJSFrameDoc.contentWindow['strH'] = tmpH;
}

  function tetraHeightChanged() {
   var threeJSFrameDoc = document.getElementById("threeJSFrame");
   var tmpH = parseFloat(document.getElementById("tetraHeight").value);
   threeJSFrameDoc.contentWindow['tetraHeight'] = tmpH;
}
  function tetraJumpHeightChanged() {
   var threeJSFrameDoc = document.getElementById("threeJSFrame");
   var tmpH = parseFloat(document.getElementById("tetraJumpHeight").value);
   threeJSFrameDoc.contentWindow['tetraJumpHeight'] = tmpH;
}

</script>
</head>
<body>
<center>
<iframe name="threeJSFrame" id="threeJSFrame" width="480px" height="480px" src="graph3dframe.html"
        allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true">
</iframe>

<div id="slider_a"></div>
<div id="aval"></div>
<div id="slider_b"></div>
<div id="bval"></div>
<div id="strF"><form>
f(x,y) = <input type="text" id="strFInput" value="x*x" onkeyup="strFChanged()"><br>
g(x,y) = <input type="text" id="strGInput" value="y*y" onkeyup="strGChanged()"><br>
h(x,y) = <input type="text" id="strHInput" value="a*f(x,y) + b*g(x,y)" onkeyup="strHChanged()">
  </form></div>
</center>
</body>
</html>
